<template>
  <div class="contentArea">
    <div class="setting">
      <div class="loginArea">
        <div class="inputWrite">


          <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">
            <el-form-item label="账号" prop="name">
              <el-input v-model="ruleForm.name" @keyup.enter="submitForm"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off" @keyup.enter="submitForm"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>

        </div>
        <div class="incident"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, getCurrentInstance } from "vue";
export default {
  name: "",
  // 定义模板
  components: {},
  //在创建组件之前执行
  setup(props, context) {
    const state = reactive({
      name: "登录页",
      ruleForm: {
        name: "1",
        pass: "2",
      },
      a: "测试",
      b: "哈哈",
      rules: {
        name: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    });
    const { proxy } = getCurrentInstance();
    console.log(proxy.$utils);
    const num = ref(0);
    const ruleFormRef = ref(null)

    const submitForm = () => {
      // console.log(state);
      // console.log(ruleFormRef.value)
      ruleFormRef.validate((valid) => {
          if (valid) {
            console.log(1111)
          } 
        });
    };

    return {
      ...toRefs(state),
      num,
      ruleFormRef,
      submitForm,
    };
  },
};
</script>
<style scoped lang ='less'>
.setting {
  background: url("../../assets/狗2.jpg") center no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  min-width: 1400px;
}
.loginArea {
  width: 340px;
  height: 280px;
  background: rgba(255, 255, 255, 0.6);
  position: fixed;
  right: 10%;
  top: 26%;
  border-radius: 6px;
  padding: 20px;
  box-sizing: border-box;
}
</style>